<div class="d-flex flex-row align-items-center mb-4">
    <h3 class="mr-auto">Attribution Analysis</h3>
    <a class="btn btn-sm btn-transparent primary-dark ml-auto text-none" href="javascript:;;" (click)="attributionModal.show()">View Attribution Details</a>
</div>

<div class="d-flex flex-row align-items-stretch shadow">
    <div class="card w-50 left-card">
        <div *ngIf="riskClusters" class="keyIssuesTable px-3 py-4">
            <div class="d-flex align-items-end pb-2 issues-header">
                <div class="w-5 px-0">&nbsp;</div>
                <div class="w-60">
                    <div class="d-flex align-items-center">
                        <div class="mr-auto">Issues</div>
                        <div class="ml-auto px-0">Score</div>
                    </div>
                </div>
                <div class="flex-grow-1">
                    ESG Risk Rating <span class="small pointer" (click)="ratingScaleModal.show()"><i class="ti-help-alt"></i></span>
                </div>
            </div>

            <div *ngIf="riskClusters">
                <div *ngFor="let indicator of elements; let i = index;" class="mb-3" [ngClass]="{'d-flex': i <= 5 || showAllIndicators, 'd-none': i > 5 && !showAllIndicators}">
                    <div class="w-5 px-0 text-center">
                        <img *ngIf="indicator.events?.length > 0" [attr.src]="'/assets/icons-svg/icon-cat'+indicator.events[0].category+'.svg'" />
                    </div>
                    <div class="w-50">
                        <div class="d-flex align-items-stretch px-0">
                            <div class="w-15 text-dark-grey text-center px-0">{{ i + 1 }}</div>
                            <div class="w-100 text-link pointer" [routerLink]="['../', 'mei', indicator.externalId, indicator.type]">{{ indicator.name }}</div>
                        </div>
                    </div>
                    <div class="w-10 px-0 text-center">{{ indicator.unmanaged.value | number:'1.1-1' }}</div>
                    <div class="flex-grow-1">
                        <div intervalChart [chartID]="'indicator'+i+'intervalchart'" [clusters]="riskClusters" [currentValue]="indicator.unmanaged.value"
                            [companyCode]="getIndicatorClusterProp(indicator, 'code')" [axisReversed]="true" [showAxis]="false" [showText]="false"
                            style="position: relative">
                            <div id="indicator{{ i }}intervalchart" class="intervalChart"></div>
                            <div id="indicator{{ i }}intervalchartAxis"></div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="mt-3 text-center">
                <a (click)="showAllIndicators = !showAllIndicators" href="javascript:;" class="btn btn-sm text-primary-dark ml-5">View {{ showAllIndicators ? 'Less' : 'More' }}</a>
            </div>

            <div class="secondary-text mt-4">
                <img [attr.src]="'/assets/icons-svg/icon-cat-blank.svg'" class="controversy-icon" /> = Significant Event
            </div>
        </div>
    </div>

    <div class="card w-50 right-card">
        <div class="card-body">
            <div weightChart *ngIf="weightChartData" [chartID]="'weightchart'" [chartData]="weightChartData"
                [verticalAxisName]="'Management'" [verticalAxisMax]="100"
                [horizontalAxisName]="'Exposure'" [horizontalAxisMax]="20">
                <div id="weightchart" style="height:360px;"></div>
            </div>
            <div class="secondary-text mt-4">
                <img [attr.src]="'/assets/icons-svg/icon-weight-legend.svg'" class="controversy-icon" /> Circle size = Contribution to ESG Risk Rating
            </div>
        </div>
    </div>
</div>



<!-- MEI/INDICATORS -->
<div *ngFor="let issue of elements; let i = index;" class="row borderBottomDashed indicatorDetails" [ngClass]="{'borderTop': i == 0, 'hidden': currentComponent == 'keyIssues' && (i > 2) && !showAllIndicators}">

    <!-- PILLARS OF GC-->
    <pillar-details *ngIf="meiType == 'BaselineIssue'" [canExpand]="currentComponent == 'meiIndicators' && issue.indicatorType == 0" [indicator]="issue" [columns]="columns"
        [indicatorIndex]="i + 1" [showAxis]="baseline == undefined && i == 0" [companyId]="companyId" [externalId]="externalId"
        class="col-md-12" style="width:100%;padding:0px"></pillar-details>

    <!-- EVENT INDICATORS OF MEI -->
    <event-details id="{{issue.code}}" *ngIf="currentComponent == 'meiIndicators' && issue.indicatorType == 1" [eventIndicator]="issue" [eventIndex]="i+1"
        [companyId]="companyId" [showAxis]="baseline == undefined && i == 0" [noExpand]="issue.category == 0" class="col-md-12" style="width:100%; padding:0px"></event-details>
</div>

<app-modal #attributionModal [id]="'attributionModal'" [size]="'modal-xl'" [showCloseButton]=true>
    <div class="app-modal-header">
        Attribution Details
    </div>
    <div class="app-modal-body px-4">
        <table class="table attribution-table" *ngIf="elements && riskClusters">
            <thead>
                <tr>
                    <th scope="col" class="w-5">&nbsp;</th>
                    <th scope="col" class="w-25">Issue Name</th>
                    <th scope="col" class="text-center">Contribution to ESG Risk Rating</th>
                    <th scope="col" class="numeric-header">SubIndustry Exposure</th>
                    <th scope="col" class="numeric-header">Company Exposure</th>
                    <th scope="col" class="numeric-header">Excess Exposure&nbsp;<i class="ti-help-alt" title="The difference between the company’s exposure and the subindustry’s exposure."></i></th>
                    <th scope="col" class="numeric-header">Manageable Risk Factor&nbsp;<i class="ti-help-alt" title="Material ESG risk that can be influenced and managed through suitable policies, programmes and initiatives."></i></th>
                    <th scope="col" class="numeric-header">Management Score</th>
                    <th scope="col" class="numeric-header" colspan="2">ESG Risk Rating</th>
                </tr>
            </thead>
            <tbody>
                <tr *ngFor="let indicator of elements; let i = index;">
                    <td>
                        <img *ngIf="indicator.events?.length > 0" class="controversy-icon" [attr.src]="'/assets/icons-svg/icon-cat'+indicator.events[0].category+'.svg'" />
                    </td>
                    <td>{{ indicator.name }}</td>
                    <td class="numeric-header">{{ indicator.finalWeight | percent:'1.1-1' }}</td>
                    <td class="numeric-header">{{ indicator.subIndustryExposure.value | number:'1.1-1' }}
                    </td>
                    <td class="numeric-header">{{ indicator.exposure.value | number:'1.1-1' }}</td>
                    <td class="numeric-header">
                        <span *ngIf="indicator.type != 'BaselineIssue'">{{ indicator.excessExposure.value | number:'1.1-1' }}</span>
                        <span *ngIf="indicator.type == 'BaselineIssue'">-</span>
                    </td>
                    <td class="numeric-header">{{ indicator.manageableRiskFactor.value | percent }}</td>
                    <td class="numeric-header">{{ indicator.management.value | number:'1.1-1' }}
                    </td>
                    <td class="text-right">{{ indicator.unmanaged.value | number:'1.1-1' }}</td>
                    <td>
                        <div intervalChart [chartID]="'indicatorDetail'+i+'intervalchart'" [clusters]="riskClusters" [currentValue]="indicator.unmanaged.value"
                            [companyCode]="getIndicatorClusterProp(indicator, 'code')" [axisReversed]="true" [showAxis]="false" [showText]="false"
                            style="position: relative; display: none;">
                            <div id="indicatorDetail{{ i }}intervalchart" class="intervalChart"></div>
                            <div id="indicatorDetail{{ i }}intervalchartAxis"></div>
                        </div>
                        {{ indicator.unmanaged.clusterName }}
                    </td>
                </tr>
            </tbody>
            <tfoot>
                <tr>
                    <td>&nbsp;</td>
                    <td>Overall</td>
                    <td class="text-center">{{ 1 | percent }}</td>
                    <td class="text-center">{{ company?.subIndustryExposureScore | number:'1.1-1' }}</td>
                    <td class="text-center">{{ company?.exposure | number:'1.1-1' }}</td>
                    <td class="text-center">{{ company?.overallExcessExposure | number:'1.1-1' }}</td>
                    <td class="text-center">-</td>
                    <td class="text-center">{{company?.management | number: '1.1-1' }}</td>
                    <td class="text-right">{{ company?.riskRating | number:'1.1-1' }}</td>
                    <td class="text-left">{{ company?.assessment }}</td>
                </tr>
            </tfoot>
        </table>
    </div>
</app-modal>

<app-modal #ratingScaleModal [id]="'ratingScaleModal'" [size]="'modal-lg'" [showCloseButton]=true>
    <div class="app-modal-header">
        ESG Risk Rating
    </div>
    <div class="app-modal-body px-4">
        <div class="d-flex mb-1" *ngFor="let cluster of riskClusters">
            <div class="w-5">
                <div class="chart-legend-block rating-block" [style.background]="cluster.color"></div>
            </div>
            <div class="w-95"><span class="bold">{{ cluster.name }} risk</span>: enterprise value is considered to have a {{ cluster.name | lowercase }} risk of material financial impacts driven by ESG factors</div>
        </div>
    </div>
</app-modal>